import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-components';
import { Button, Card, Descriptions, Space, Statistic } from 'antd';
import type { FC } from 'react';
import { useState } from 'react';
import useStyles from './style.style';

const ButtonGroup = Button.Group;

const action = (
  <RouteContext.Consumer>
    {() => {
      return (
        <Space>
          <ButtonGroup>
            <Button>操作一</Button>
          </ButtonGroup>
          <Button type="primary">主操作</Button>
        </Space>
      );
    }}
  </RouteContext.Consumer>
);

type AdvancedState = {
  operationKey: 'tab1' | 'tab2' | 'tab3';
  tabActiveKey: string;
};
const Advanced: FC = () => {
  const { styles } = useStyles();

  const extra = (
    <div className={styles.moreInfo}>
      <Statistic title="状态" value="使用中" />
    </div>
  );
  const description = (
    <RouteContext.Consumer>
      {() => (
        <Descriptions className={styles.headerList} size="small">
          <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
        </Descriptions>
      )}
    </RouteContext.Consumer>
  );

  const [tabStatus, seTabStatus] = useState<AdvancedState>({
    operationKey: 'tab1',
    tabActiveKey: 'detail',
  });

  const onTabChange = (tabActiveKey: string) => {
    seTabStatus({
      ...tabStatus,
      tabActiveKey,
    });
  };

  return (
    <PageContainer
      title="编号：234231029431"
      extra={action}
      className={styles.pageHeader}
      content={description}
      extraContent={extra}
      tabActiveKey={tabStatus.tabActiveKey}
      onTabChange={onTabChange}
      tabList={[
        {
          key: 'detail',
          tab: '详情',
        },
        {
          key: 'rule',
          tab: '规则',
        },
      ]}
    >
      <div className={styles.main}>
        <GridContent>
          <Card
            title="用户信息"
            style={{
              marginBottom: 24,
            }}
            bordered={false}
          >
            <Descriptions
              style={{
                marginBottom: 24,
              }}
            >
              <Descriptions.Item label="电话号码"> 18825288888</Descriptions.Item>
              <Descriptions.Item label="备注">0000</Descriptions.Item>
            </Descriptions>
          </Card>
        </GridContent>
      </div>
    </PageContainer>
  );
};
export default Advanced;
